<template>
  <a-layout id="components-layout-demo-custom-trigger" style="height: 100%">
    <a-layout-sider :trigger="null"
                    collapsible
                    v-model="collapsed" width="230px">
      <div class="logo"></div>
      <nip-menu :isIcon='true'/>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0" class="layout-side">
        <a-icon class="trigger"
                :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                @click="()=> collapsed = !collapsed"/>
        <div class="layout-right-center margin-right-10-px">
          <a-avatar size="small" icon="user"/>
          Z
        </div>
      </a-layout-header>
      <nip-breadcrumb/>
      <a-layout-content
        :style="{ margin: '0 10px 10px', padding: '10px', background: '#fff', minHeight: '280px' }">
        <transition name="slide-fade" mode="out-in">
          <router-view></router-view>
        </transition>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
  import {Layout, Icon, Avatar} from "ant-design-vue"
  import NipMenu from '@/components/NipMenu';
  import NipBreadcrumb from '@/components/NipBreadcrumb';

  export default {
    name: 'Index',
    components: {
      NipBreadcrumb,
      NipMenu,
      AAvatar: Avatar,
      AIcon: Icon,
      ALayout: Layout,
      ALayoutHeader: Layout.Header,
      ALayoutSider: Layout.Sider,
      ALayoutContent: Layout.Content
    },
    data() {
      return {
        collapsed: false,
        visible: false,
      }
    },
    created() {
      console.log(config.webpath);
      console.log(config.test);
    },
    mounted() {
    },
    methods: {}
  }
</script>

<style scoped>
  #components-layout-demo-custom-trigger .trigger {
    font-size: 18px;
    line-height: 64px;
    padding: 0 12px;
    cursor: pointer;
    transition: color .3s;
  }

  #components-layout-demo-custom-trigger .trigger:hover {
    color: #1890ff;
  }

  #components-layout-demo-custom-trigger .logo {
    height: 32px;
    background: rgba(255, 255, 255, .2);
    margin: 16px;
  }
</style>
